import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  SectionList,
  TouchableOpacity,
  Image,
  Dimensions,
  Modal,
  ScrollView,
  PanResponder,
  PixelRatio,
  StatusBar,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native';

import MIcon from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { NavigationActions } from 'react-navigation';
import {Avatar, Divider } from 'react-native-elements';
import Button from 'antd-mobile/lib/button';
import CommonStyles from '../../common/styles';
import {AlbumView, Overlay, PullPicker} from 'teaset';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';


const {width, height} = Dimensions.get('window');

export default class TopicDetail extends React.Component {
  static navigationOptions = (navigation) => {
    return ({
      tabBarVisible: false,
      header: null,
    })
  }

  constructor(props) {
    super(props);
    this.state = {
      orderType: null,
    }
  }

  list = [
    {"name": "明珠", "key": 1},
    {"name": "新悦", "key": 2},
    {"name": "桃源", "key": 3},
    {"name": "富临", "key": 4},
  ]

  images = [
    require('../../images/1.jpg'),
    require('../../images/2.jpg'),
    require('../../images/3.jpg'),
    {uri: "http://ot8uv8omp.bkt.clouddn.com/2.png"},
  
  ]

  orderTypes = [
    '综合排序',
    '按回复时间排序',
    '按发表时间排序'
  ]

  sections = [
    {data: [{name: "dddd", key: 1}], title: '第一部分', content: "forum_info"},
    {data: this.list, title: '第二部分', content: "topic_list"},
  ]

  selectOrderType() {
    console.log("selectOrderType");
    PullPicker.show(
      '选择排列顺序',
      this.orderTypes,
      this.state.orderType || 0,
      (item, index) => this.setState({orderType: index})
    );
  }


  renderSectionHeader({section}) {
    if (section.content == "forum_info") {
      return null;
    }
    return (
      <View style={[CommonStyles.container]}>
        <View style={[CommonStyles.row, styles.topicFilter]}>
          <Text style={styles.topicFilterActive}>全部</Text>
      
            <TouchableOpacity style={[CommonStyles.row, styles.topicFilterOrder]} onPress={() => this.selectOrderType()}>
              <Text>回复时间排序</Text>
              <Icon name="chevron-down" size={20}/>
            </TouchableOpacity>
       
        </View>
      </View>
     
    )
  }

  viewImage(index) {
    console.log("viewImage: " + index);
    let overlayView = (
      <Overlay.PopView
        style={{}}
        containerStyle={{flex: 1}}
        overlayOpacity={1}
        type='custom'
        customBounds={{x: 10, y: 10, width: 200, height: 400}}
        ref={v => this.fullImageView = v}
      >
        <AlbumView
          style={{flex: 1}}
          control={true}
          images={this.images}
          defaultIndex={1}
          onPress={() => this.fullImageView && this.fullImageView.close()}
          />
        <StatusBar animated={false} hidden={true} />
      </Overlay.PopView>
    );
    Overlay.show(overlayView);
  }

  gotoTopicDetail() {
    console.log("gotoTopicDetail");
    this.props.navigation.navigate("CommentComment");
  }

  

  renderForumInfo() {
    return (
      <View style={[CommonStyles.container, styles.itemWrap]}>
        <TouchableOpacity>
          <View style={[CommonStyles.row, styles.mainFloorInfoHeader]}>
            <View style={[CommonStyles.row, styles.topicHeader]}>
              <Avatar small rounded source={{uri: "http://ot8uv8omp.bkt.clouddn.com/FoCXmNujgJjZDsYo1vh3NaJB3MYpWkUEltfpOPAi.jpeg"}} />
              <View>
                <Text style={[styles.nickname]}>小李飞刀</Text>
                <View style={[CommonStyles.row]}>
                  <Text style={[styles.updateTime]}>1分钟前</Text>
                  <View style={[CommonStyles.row, styles.countWrap]}>
                    <Icon name="comment-outline" />
                    <Text style={styles.viewCount}>100</Text>
                  </View>
                  <View style={[CommonStyles.row, styles.countWrap]}>
                    <Icon name="view-week" />
                    <Text style={styles.commentCount}>120</Text>
                  </View>
                </View>
              </View>
            </View>
            <Button type="primary" size="small">关注</Button>
          </View>
          <View style={styles.contentWrap}>
            <Text>人生得意须尽欢，莫使金樽空对月</Text>
          </View>
        </TouchableOpacity>
        <View style={[CommonStyles.row, styles.attachmentImageWrap]}>
        <TouchableOpacity onPress={() => this.viewImage(1)}>
          <Image source={{uri: "http://ot8uv8omp.bkt.clouddn.com/2.png"}} style={styles.attachmentImage} />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.viewImage(2)}>
          <Image source={{uri: "http://ot8uv8omp.bkt.clouddn.com/7.png"}} style={styles.attachmentImage} />
        </TouchableOpacity>
        </View>
        
      </View>
    )
  }

  renderItem = ({item, index, section}) => {
    if (section.content == "forum_info") {
      return this.renderForumInfo();
    }
    return (
      <View key={index} style={[CommonStyles.container, styles.itemWrap]}>
        <TouchableOpacity onPress={() => this.gotoTopicDetail()}>
          <View style={[CommonStyles.row, styles.topicHeader]}>
            <Avatar small rounded source={{uri: "http://ot8uv8omp.bkt.clouddn.com/FoCXmNujgJjZDsYo1vh3NaJB3MYpWkUEltfpOPAi.jpeg"}} />
            <View>
              <Text style={[styles.nickname]}>小李飞刀</Text>
              <View style={[CommonStyles.row]}>
                <Text style={[styles.updateTime]}>1分钟前</Text>
                <View style={[CommonStyles.row, styles.countWrap]}>
                  <Icon name="comment-outline" />
                  <Text style={styles.viewCount}>100</Text>
                </View>
                <View style={[CommonStyles.row, styles.countWrap]}>
                  <Icon name="view-week" />
                  <Text style={styles.commentCount}>120</Text>
                </View>
              </View>
            </View>
          </View>
        </TouchableOpacity>
        <View style={styles.itemContentWrap}>
          <TouchableOpacity onPress={() => this.gotoTopicDetail()}>
            <View style={[styles.contentWrap]}>
              <Text>人生得意须尽欢，莫使金樽空对月</Text>
            </View>
          </TouchableOpacity>
          <View style={[CommonStyles.row, styles.attachmentImageWrap]}>
            <TouchableOpacity onPress={() => this.viewImage(1)} ref="image-{index}-1">
              <Image source={{uri: "http://ot8uv8omp.bkt.clouddn.com/2.png"}} style={styles.detailAttachmentImage} />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.viewImage(2)} ref="image-{index}-2">
              <Image source={{uri: "http://ot8uv8omp.bkt.clouddn.com/7.png"}} style={styles.detailAttachmentImage} />
            </TouchableOpacity>
          </View>
          <TouchableOpacity  onPress={() => this.gotoTopicDetail()}>
            <View style={styles.commentCommentWrap}>
              <Text style={styles.commentCommentContent}>可汗: 还有谁？喵喵最棒！还有谁？喵喵最棒！还有谁？喵喵最棒！还有谁？喵喵最棒！还有谁？喵喵最棒！还有谁？喵喵最棒！还有谁？喵喵最棒！</Text>
              <Text style={styles.commentCommentContent}>猪哥: 回复 可汗: 毛线啊，必须先 SW + CP 半小时</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  itemSeparator = () => {
    return null;
    return (
      <View style={styles.itemSeparator}></View>
    )
  }

  goBack() {
  //  this.props.navigation.navigate("ForumMain");
   this.props.navigation.goBack();
  }

  doFollow() {

  }

  render() {
    return (
      <KeyboardAvoidingView style={{flex: 1}} behavior="padding">
        <View style={[CommonStyles.container, CommonStyles.row, styles.sectionTopAction]}>
          <TouchableOpacity onPress={() => {this.goBack()}}>
            <Icon name="close" size={20} style={styles.pagetTitleLeft}/>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {this.goBack()}}>
            <Icon name="plus" size={20} style={styles.pagetTitleRight}/>
          </TouchableOpacity>
        </View>
        <SectionList
          renderItem={this.renderItem} 
          renderSectionHeader={(info) => this.renderSectionHeader(info)} 
          sections={this.sections}
        />
        <View style={[CommonStyles.row, styles.textInputWrap]}>
          <TextInput style={styles.textInput} multipline={true} underlineColorAndroid="transparent" />
          <TouchableOpacity style={styles.submitBtn}>
            <Text style={{fontSize: 18}}>提交</Text>
          </TouchableOpacity>
        </View>
     </KeyboardAvoidingView>
    )
  }
}

var styles = StyleSheet.create({
  sectionTopAction: {
    paddingTop: 24,
    justifyContent: "space-between",
  },
  pagetTitleLeft: {
    alignSelf: "flex-start"
  },
  sectionHeaderWrapper: {
    paddingBottom: 15,
    marginBottom: 5,
  },
  sectionHeader: {
    alignItems: "center",
    justifyContent: "space-between",
  },
  forumDesc: {
    marginLeft: 10,
  }, 
  forumInfo: {
    alignItems: "center",
  },
  forumCover: {

  },
  nickname: {
    marginBottom: 5
  },
  updateTime: {
    fontSize: 12,
  },
  viewCount: {
    fontSize: 12,
  },
  commentCount: {
    fontSize: 12,
  },
  forumName: {
    fontSize: 20,
    marginBottom: 5
  },
  forumStat: {
    marginRight: 10,
  },
  followBtn: {
    width: 50,
    height: 30,
  },
  divider: {
    marginTop: 10,
    marginBottom: 10,
  },

  flatList: {
    marginTop: 4,
  },

  itemWrap: {
    marginBottom: 3,
    paddingTop: 10,
    paddingBottom: 10,
  },
  itemContentWrap: {
    paddingLeft: 40,
  },
  itemSeparator: {
    display: "flex",
    height: 1,
    backgroundColor: "#ddd"
  },
  arrow: {
    position: "absolute",
    right: 0
  },
  countWrap: {
    alignItems: "center",
    marginLeft: 5,
  },
  contentWrap: {
    paddingTop: 10,
    paddingBottom: 10,

  },
  floorWrap: {
    paddingLeft: 80,
  },
  attachmentImage: {
    //marginRight: 5,
    height: 100,
    width: (width - 30) / 2,
  },
  detailAttachmentImage: {
    height: 100,
    width: (width - 70) / 2,
  },
  topicFilter: {
    justifyContent: "space-between",
    alignItems: "center",
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomColor: "#eee",
    borderBottomWidth: 1,
  },
  topicFilterActive: {
    borderBottomWidth: 1,
    borderBottomColor: "#000",
  },
  topicFilterOrder: {
    alignItems: "center",
  },
  mainFloorInfoHeader: {
    justifyContent: "space-between"
  },
  commentCommentWrap: {
    backgroundColor: "#eee",
    padding: 10,
    marginTop:10,
  },
  commentCommentContent: {
    flexWrap: "wrap",
    marginBottom: 10,
  },
  textInputWrap: {
    height: 40,
  },
  textInput: {
    flexGrow: 11,
    padding: 10,
    textAlignVertical: "top",
    backgroundColor: "#eee",
  },
  submitBtn: {
    display: "flex",
    flexGrow: 1,
    justifyContent: "center",
    alignItems: "center",
  }

})